<template>
    <div class="ssl-certificate-generator">
        <!-- 主要工作区域 -->
        <div class="main-workspace">
            <div class="workspace-grid">
                <!-- 配置区域 -->
                <div class="workspace-card config-card">
                    <div class="card-header">
                        <div class="card-title">
                            <div class="title-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="title-text">
                                <h3>证书配置</h3>
                                <p>设置证书的基本信息</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-content">
                        <!-- 基本信息 -->
                        <div class="config-section">
                            <h4>基本信息</h4>
                            <div class="form-grid">
                                <div class="form-item">
                                    <label class="form-label">通用名称 (CN)</label>
                                    <c-input-text
                                        v-model:value="config.commonName"
                                        placeholder="例如: example.com"
                                        class="form-input"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">组织 (O)</label>
                                    <c-input-text
                                        v-model:value="config.organization"
                                        placeholder="例如: My Company Inc."
                                        class="form-input"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">组织单位 (OU)</label>
                                    <c-input-text
                                        v-model:value="config.organizationalUnit"
                                        placeholder="例如: IT Department"
                                        class="form-input"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">国家 (C)</label>
                                    <c-input-text
                                        v-model:value="config.country"
                                        placeholder="例如: CN"
                                        class="form-input"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">省份 (ST)</label>
                                    <c-input-text
                                        v-model:value="config.state"
                                        placeholder="例如: Beijing"
                                        class="form-input"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">城市 (L)</label>
                                    <c-input-text
                                        v-model:value="config.city"
                                        placeholder="例如: Beijing"
                                        class="form-input"
                                    />
                                </div>
                            </div>
                        </div>

                        <!-- 证书设置 -->
                        <div class="config-section">
                            <h4>证书设置</h4>
                            <div class="form-grid">
                                <div class="form-item">
                                    <label class="form-label">密钥算法</label>
                                    <c-buttons-select
                                        v-model:value="config.keyAlgorithm"
                                        :options="keyAlgorithms"
                                        class="form-select"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">密钥长度</label>
                                    <c-buttons-select
                                        v-model:value="config.keySize"
                                        :options="keySizes"
                                        class="form-select"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">有效期 (天)</label>
                                    <c-input-text
                                        v-model:value="config.validityDays"
                                        placeholder="365"
                                        class="form-input"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">签名算法</label>
                                    <c-buttons-select
                                        v-model:value="config.signatureAlgorithm"
                                        :options="signatureAlgorithms"
                                        class="form-select"
                                    />
                                </div>
                            </div>
                        </div>

                        <!-- 扩展信息 -->
                        <div class="config-section">
                            <h4>扩展信息</h4>
                            <div class="form-grid">
                                <div class="form-item">
                                    <label class="form-label">备用域名 (SAN)</label>
                                    <c-input-text
                                        v-model:value="config.sanDomains"
                                        placeholder="例如: www.example.com, api.example.com"
                                        class="form-input"
                                    />
                                </div>
                                <div class="form-item">
                                    <label class="form-label">IP地址</label>
                                    <c-input-text
                                        v-model:value="config.sanIPs"
                                        placeholder="例如: 192.168.1.1, 10.0.0.1"
                                        class="form-input"
                                    />
                                </div>
                            </div>
                        </div>

                        <!-- 密码保护配置 -->
                        <div class="config-section">
                            <h4>密码保护 (可选)</h4>
                            <div class="password-protection-info">
                                <p class="info-text">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10.29 3.86L1.82 18A2 2 0 0 0 3.54 21H20.46A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    如需为私钥添加密码保护，请使用以下命令：
                                </p>
                                <div class="command-example">
                                    <code class="command-code">
                                        openssl rsa -aes256 -in server.key -out server_encrypted.key
                                    </code>
                                    <button 
                                        @click="copyCommand('openssl rsa -aes256 -in server.key -out server_encrypted.key')"
                                        class="copy-button"
                                        title="复制命令"
                                    >
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M16 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <rect x="8" y="2" width="8" height="4" rx="1" ry="1" stroke="currentColor" stroke-width="2"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 生成结果区域 -->
                <div class="workspace-card result-card">
                    <div class="card-header">
                        <div class="card-title">
                            <div class="title-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
                                </svg>
                            </div>
                            <div class="title-text">
                                <h3>生成结果</h3>
                                <p>生成的证书文件将显示在这里，且一定要妥善报错，本功能不做任何信息报错，丢失则彻底无法找回</p>
                            </div>
                        </div>
                        <div class="card-actions">
                            <c-button 
                                v-if="generatedFiles.length > 0" 
                                size="small" 
                                @click="downloadAll"
                                class="download-btn"
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                下载全部
                            </c-button>
                        </div>
                    </div>
                    
                    <div class="card-content">
                        <div v-if="isGenerating" class="loading-state">
                            <div class="loading-spinner"></div>
                            <p>正在生成证书...</p>
                        </div>
                        
                        <div v-else-if="error" class="error-state">
                            <div class="error-icon">
                                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.29 3.86L1.82 18A2 2 0 0 0 3.54 21H20.46A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <h4>生成失败</h4>
                            <p>{{ error }}</p>
                        </div>
                        
                        <div v-else-if="generatedFiles.length > 0" class="generated-files">
                            <div 
                                v-for="file in generatedFiles" 
                                :key="file.name"
                                class="file-item"
                            >
                                <div class="file-header">
                                    <div class="file-info">
                                        <span class="file-name">{{ getFileDisplayName(file.name) }}</span>
                                        <span class="file-size">{{ file.size }} bytes</span>
                                        <span class="file-description">{{ getFileDescription(file.name) }}</span>
                                    </div>
                                    <div class="file-actions">
                                        <c-button 
                                            size="small" 
                                            @click="downloadFile(file)"
                                            class="download-file-btn"
                                        >
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                            下载
                                        </c-button>
                                        <c-button 
                                            size="small" 
                                            @click="copyFile(file)"
                                            class="copy-file-btn"
                                        >
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M8 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                            复制
                                        </c-button>
                                    </div>
                                </div>
                                <div class="file-preview">
                                    <c-input-text
                                        :value="file.content"
                                        :rows="8"
                                        readonly
                                        multiline
                                        monospace
                                        class="file-content"
                                    />
                                </div>
                            </div>
                        </div>
                        
                        <div v-else class="empty-state">
                            <div class="empty-icon">
                                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15 4V2C15 1.46957 14.7893 0.960859 14.4142 0.585786C14.0391 0.212713 13.5304 0 13 0H3C2.46957 0 1.96086 0.212713 1.58579 0.585786C1.21071 0.960859 1 1.46957 1 2V22C1 22.5304 1.21071 23.0391 1.58579 23.4142C1.96086 23.7873 2.46957 24 3 24H13C13.5304 24 14.0391 23.7873 14.4142 23.4142C14.7893 23.0391 15 22.5304 15 22V20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <h4>准备生成</h4>
                            <p>配置证书信息后点击生成按钮</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="action-bar">
                <div class="action-buttons">
                    <c-button 
                        @click="generateCertificate" 
                        :loading="isGenerating" 
                        type="primary"
                        size="large"
                        class="generate-btn"
                        :disabled="!isConfigValid"
                    >
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        生成证书
                    </c-button>
                    <c-button 
                        @click="resetConfig"
                        size="large"
                        class="reset-btn"
                    >
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z" stroke="currentColor" stroke-width="2"/>
                            <path d="M12 7V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        重置配置
                    </c-button>
                </div>
            </div>
        </div>

        <!-- 使用说明文档 -->
        <div class="documentation-section">
            <div class="documentation-card">
                <div class="doc-header">
                    <div class="doc-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 18.9609 21.7893 19.3359 21.4142C19.7109 21.0391 19.9219 20.5304 19.9219 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h3>使用说明</h3>
                </div>
                <div class="doc-content">
                    <div class="doc-section">
                        <h4>生成的文件说明</h4>
                        <div class="file-explanations">
                            <div class="file-explanation">
                                <strong>server.key (私钥文件)</strong>
                                <p>这是服务器的私钥文件，用于SSL/TLS加密通信。私钥必须保密，不能泄露给任何人。</p>
                                <ul>
                                    <li>用于生成证书签名请求(CSR)</li>
                                    <li>用于SSL/TLS服务器配置</li>
                                    <li>必须安全保存，不能共享</li>
                                    <li>如果启用了密码保护，每次使用都需要输入密码</li>
                                </ul>
                            </div>
                            <div class="file-explanation">
                                <strong>server.csr (证书签名请求)</strong>
                                <p>证书签名请求文件，用于向证书颁发机构(CA)申请正式证书。</p>
                                <ul>
                                    <li>包含公钥和证书信息</li>
                                    <li>提交给CA进行签名</li>
                                    <li>获得正式证书后可以删除</li>
                                </ul>
                            </div>
                            <div class="file-explanation">
                                <strong>server.crt (服务器证书)</strong>
                                <p>自签名的服务器证书，可以直接用于HTTPS服务。</p>
                                <ul>
                                    <li>自签名证书，浏览器会显示警告</li>
                                    <li>适用于内部测试环境</li>
                                    <li>生产环境建议使用CA签发的证书</li>
                                </ul>
                            </div>
                            <div class="file-explanation">
                                <strong>ca.crt (CA根证书)</strong>
                                <p>证书颁发机构的根证书，用于验证证书链。</p>
                                <ul>
                                    <li>用于验证自签名证书</li>
                                    <li>可以导入到信任存储</li>
                                    <li>避免浏览器安全警告</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="doc-section">
                        <h4>常见使用场景</h4>
                        <div class="usage-scenarios">
                            <div class="scenario">
                                <h5>1. 开发测试环境</h5>
                                <p>在本地开发或测试环境中使用自签名证书：</p>
                                <pre><code># Nginx配置示例
server {
    listen 443 ssl;
    server_name localhost;
    
    ssl_certificate /path/to/server.crt;
    ssl_certificate_key /path/to/server.key;
    
    # 其他配置...
}</code></pre>
                                
                                <p><strong>如果启用了密码保护：</strong></p>
                                <pre><code># 启动Nginx时会提示输入密码
# Enter PEM pass phrase: [输入私钥密码]

# 或者使用密码文件（不推荐，降低安全性）
# ssl_password_file /path/to/password.txt;</code></pre>
                            </div>
                            <div class="scenario">
                                <h5>2. 内部系统部署</h5>
                                <p>在内部网络系统中部署HTTPS服务：</p>
                                <ul>
                                    <li>将ca.crt导入到客户端信任存储</li>
                                    <li>配置服务器使用server.crt和server.key</li>
                                    <li>客户端将信任该证书</li>
                                </ul>
                                <p><strong>重要：</strong>必须将ca.crt导入到每个客户端的信任存储中，否则浏览器仍会显示证书警告。</p>
                            </div>
                            <div class="scenario">
                                <h5>3. 申请正式证书</h5>
                                <p>使用CSR向CA申请正式证书：</p>
                                <ol>
                                    <li>生成证书和CSR</li>
                                    <li>将CSR提交给CA（如Let's Encrypt、DigiCert等）</li>
                                    <li>获得正式证书后替换server.crt</li>
                                    <li>继续使用原有的server.key</li>
                                </ol>
                            </div>
                            
                            <div class="scenario">
                                <h5>4. 密码保护使用场景</h5>
                                <p>启用密码保护后的使用方式：</p>
                                <ul>
                                    <li><strong>高安全环境：</strong>银行、政府、医疗等敏感行业</li>
                                    <li><strong>合规要求：</strong>需要满足PCI DSS、SOX等标准</li>
                                    <li><strong>多用户服务器：</strong>防止其他管理员误操作</li>
                                    <li><strong>备份存储：</strong>私钥备份到外部存储时</li>
                                </ul>
                                <p><strong>注意：</strong>启用密码保护后，每次重启服务都需要输入密码，不适合自动化部署场景。</p>
                                
                                <div class="password-protection-note">
                                    <h6>密码保护说明</h6>
                                    <p>本工具生成的加密私钥使用标准的RSA格式，与OpenSSL完全兼容。如果遇到兼容性问题，也可以使用OpenSSL命令手动重新加密：</p>
                                    <pre><code># 重新加密私钥 (如果需要)
openssl rsa -aes256 -in server.key -out server_encrypted.key

# 验证密码保护
openssl rsa -in server_encrypted.key -check</code></pre>
                                    <p><strong>注意：</strong>启用密码保护后，每次重启服务都需要输入密码，不适合自动化部署场景。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="doc-section">
                        <h4>CA证书导入指南</h4>
                        <div class="ca-import-guide">
                            <p><strong>重要提示：</strong>要避免浏览器显示"证书不受信任"警告，必须将ca.crt导入到客户端的信任存储中。</p>
                            
                            <div class="import-methods">
                                <div class="import-method">
                                    <h5>Windows系统</h5>
                                    <ol>
                                        <li>双击ca.crt文件</li>
                                        <li>选择"安装证书"</li>
                                        <li>选择"本地计算机"</li>
                                        <li>选择"将所有证书放入下列存储"</li>
                                        <li>点击"浏览"选择"受信任的根证书颁发机构"</li>
                                        <li>完成安装</li>
                                    </ol>
                                </div>
                                
                                <div class="import-method">
                                    <h5>macOS系统</h5>
                                    <ol>
                                        <li>双击ca.crt文件</li>
                                        <li>在钥匙串访问中，将证书拖拽到"系统"钥匙串</li>
                                        <li>双击证书，展开"信任"部分</li>
                                        <li>将"使用此证书时"设置为"始终信任"</li>
                                    </ol>
                                </div>
                                
                                <div class="import-method">
                                    <h5>Linux系统</h5>
                                    <div class="code-block">
                                        <p><strong>Ubuntu/Debian:</strong></p>
                                        <pre><code>sudo cp ca.crt /usr/local/share/ca-certificates/
sudo update-ca-certificates</code></pre>
                                        
                                        <p><strong>CentOS/RHEL:</strong></p>
                                        <pre><code>sudo cp ca.crt /etc/pki/ca-trust/source/anchors/
sudo update-ca-trust</code></pre>
                                    </div>
                                </div>
                                
                                <div class="import-method">
                                    <h5>浏览器导入</h5>
                                    <ul>
                                        <li><strong>Chrome:</strong> 设置 → 隐私设置和安全性 → 安全 → 管理证书</li>
                                        <li><strong>Firefox:</strong> 设置 → 隐私与安全 → 查看证书 → 证书机构</li>
                                        <li><strong>Edge:</strong> 设置 → Cookie和网站权限 → 管理证书</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="doc-section">
                        <h4>安全注意事项</h4>
                        <div class="security-notes">
                            <ul>
                                <li><strong>私钥安全</strong>：server.key文件包含私钥，必须妥善保管，不能泄露</li>
                                <li><strong>文件权限</strong>：私钥文件应该设置适当的文件权限（如600）</li>
                                <li><strong>证书有效期</strong>：注意证书的有效期，及时更新</li>
                                <li><strong>生产环境</strong>：生产环境建议使用受信任的CA签发的证书</li>
                                <li><strong>备份</strong>：定期备份证书和私钥文件</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useCopy } from '@/composable/copy';
import { CertificateGenerator, type CertificateConfig, type GeneratedFile } from './certificate-generator';

const config = ref<CertificateConfig>({
    commonName: '',
    organization: '',
    organizationalUnit: '',
    country: 'CN',
    state: '',
    city: '',
    keyAlgorithm: 'RSA',
    keySize: '2048',
    validityDays: '365',
    signatureAlgorithm: 'sha256',
    sanDomains: '',
    sanIPs: ''
});

const isGenerating = ref(false);
const error = ref('');
const generatedFiles = ref<GeneratedFile[]>([]);

const { copy } = useCopy();

// 选项配置
const keyAlgorithms = [
    { label: 'RSA', value: 'RSA' },
    { label: 'ECDSA', value: 'ECDSA' }
];

const keySizes = [
    { label: '1024', value: '1024' },
    { label: '2048', value: '2048' },
    { label: '4096', value: '4096' }
];

const signatureAlgorithms = [
    { label: 'SHA256', value: 'sha256' },
    { label: 'SHA384', value: 'sha384' },
    { label: 'SHA512', value: 'sha512' }
];

// 验证配置是否有效
const isConfigValid = computed(() => {
    return config.value.commonName.trim() !== '' && 
           config.value.organization.trim() !== '' &&
           config.value.country.trim() !== '';
});

// 生成证书
const generateCertificate = async () => {
    if (!isConfigValid.value) {
        return;
    }

    isGenerating.value = true;
    error.value = '';
    generatedFiles.value = [];

    try {
        const generator = new CertificateGenerator(config.value);
        const files = await generator.generateCertificate();
        generatedFiles.value = files;
    } catch (err) {
        console.error('证书生成错误:', err);
        error.value = err instanceof Error ? err.message : '生成证书时发生错误';
    } finally {
        isGenerating.value = false;
    }
};

// 重置配置
const resetConfig = () => {
    config.value = {
        commonName: '',
        organization: '',
        organizationalUnit: '',
        country: 'CN',
        state: '',
        city: '',
        keyAlgorithm: 'RSA',
        keySize: '2048',
        validityDays: '365',
        signatureAlgorithm: 'sha256',
        sanDomains: '',
        sanIPs: ''
    };
    error.value = '';
    generatedFiles.value = [];
};

// 下载单个文件
const downloadFile = (file: GeneratedFile) => {
    const blob = new Blob([file.content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = file.name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
};

// 复制文件内容
const copyFile = async (file: GeneratedFile) => {
    await copy(file.content);
};

// 复制命令到剪贴板
const copyCommand = async (command: string) => {
    await copy(command);
};

// 下载所有文件
const downloadAll = () => {
    generatedFiles.value.forEach(file => {
        downloadFile(file);
    });
};

// 获取文件显示名称
const getFileDisplayName = (fileName: string): string => {
    const nameMap: Record<string, string> = {
        'server.key': 'server.key (私钥文件)',
        'server.csr': 'server.csr (证书签名请求)',
        'server.crt': 'server.crt (服务器证书)',
        'ca.crt': 'ca.crt (CA根证书)'
    };
    return nameMap[fileName] || fileName;
};

// 获取文件描述
const getFileDescription = (fileName: string): string => {
    const descMap: Record<string, string> = {
        'server.key': '包含服务器的私钥，用于SSL/TLS加密通信，一定不能泄露',
        'server.csr': '证书签名请求，用于向CA申请正式证书',
        'server.crt': '自签名的服务器证书，用于HTTPS服务',
        'ca.crt': '证书颁发机构根证书，用于验证证书链'
    };
    return descMap[fileName] || '';
};


</script>

<style scoped>
.ssl-certificate-generator {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem 1rem;
}

/* 主要工作区域 */
.main-workspace {
    margin: 0 2rem;
}

.workspace-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 1200px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }
}

.workspace-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.workspace-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.title-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    padding: 0.5rem;
    color: white;
}

.title-text h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.title-text p {
    font-size: 0.9rem;
    margin: 0.25rem 0 0 0;
    color: #64748b;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

.card-content {
    padding: 1.5rem;
}

/* 配置区域样式 */
.config-section {
    margin-bottom: 2rem;
}

.config-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.form-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.form-input, .form-select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.form-input:focus, .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

/* 密码保护样式 */
.password-protection-info {
    background: #eff6ff;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid #3b82f6;
}

.command-example {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    background: #1e293b;
    border-radius: 6px;
    padding: 0.75rem;
}

.command-code {
    color: #e2e8f0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    flex: 1;
}

.copy-button {
    background: #374151;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-button:hover {
    background: #4b5563;
    color: white;
}

.info-text {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    color: #1e40af;
    font-size: 0.9rem;
    line-height: 1.4;
}

.checkbox-input {
    margin-right: 0.5rem;
    width: 16px;
    height: 16px;
    accent-color: #667eea;
}

.password-strength {
    margin-top: 0.5rem;
}

.strength-bar {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.strength-fill {
    height: 100%;
    transition: all 0.3s ease;
}

.strength-fill.weak {
    background: #ef4444;
}

.strength-fill.medium {
    background: #f59e0b;
}

.strength-fill.strong {
    background: #10b981;
}

.strength-fill.very-strong {
    background: #059669;
}

.strength-text {
    font-size: 0.8rem;
    color: #6b7280;
}

/* 按钮样式 */
.download-btn, .download-file-btn, .copy-file-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.download-btn {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0284c7;
}

.download-btn:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.download-file-btn {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0284c7;
}

.download-file-btn:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.copy-file-btn {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #059669;
}

.copy-file-btn:hover {
    background: #ecfdf5;
    border-color: #86efac;
}

/* 操作按钮区域 */
.action-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.action-buttons {
    display: flex;
    gap: 1rem;
}

.generate-btn, .reset-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.generate-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.generate-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reset-btn {
    background: white;
    border: 2px solid #e2e8f0;
    color: #64748b;
}

.reset-btn:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
}

/* 加载状态 */
.loading-state {
    text-align: center;
    padding: 2rem;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 错误状态 */
.error-state {
    text-align: center;
    padding: 2rem;
    color: #dc2626;
}

.error-icon {
    margin-bottom: 1rem;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

.empty-icon {
    margin-bottom: 1rem;
}

/* 生成文件样式 */
.generated-files {
    display: grid;
    gap: 1.5rem;
}

.file-item {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
}

.file-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.file-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.file-name {
    font-weight: 600;
    color: #374151;
    font-size: 1rem;
}

.file-size {
    font-size: 0.85rem;
    color: #6b7280;
}

.file-description {
    font-size: 0.8rem;
    color: #059669;
    margin-top: 0.25rem;
}

.file-actions {
    display: flex;
    gap: 0.5rem;
}

.file-preview {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.file-content {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ssl-certificate-generator {
        padding: 1rem 0.5rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .header-content {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .card-actions {
        align-self: flex-end;
    }
    
    .workspace-grid {
        gap: 1rem;
    }
    
    .card-content {
        padding: 1rem;
    }
    
    .file-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .file-actions {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.5rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    .title-text h3 {
        font-size: 1rem;
    }
    
    .title-text p {
        font-size: 0.8rem;
    }
}

/* 文档说明区域 */
.documentation-section {
    margin: 2rem 2rem 0;
}

.documentation-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.doc-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
}

.doc-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    padding: 0.5rem;
    color: white;
}

.doc-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.doc-content {
    padding: 1.5rem;
}

.doc-section {
    margin-bottom: 2rem;
}

.doc-section:last-child {
    margin-bottom: 0;
}

.doc-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.file-explanations {
    display: grid;
    gap: 1.5rem;
}

.file-explanation {
    background: #f9fafb;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid #667eea;
}

.file-explanation strong {
    color: #374151;
    font-size: 1rem;
}

.file-explanation p {
    margin: 0.5rem 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.file-explanation ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.file-explanation li {
    margin-bottom: 0.25rem;
}

.usage-scenarios {
    display: grid;
    gap: 1.5rem;
}

.scenario {
    background: #f9fafb;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid #059669;
}

.scenario h5 {
    color: #374151;
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.scenario p {
    margin: 0.5rem 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.scenario ul, .scenario ol {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.scenario li {
    margin-bottom: 0.25rem;
}

.scenario pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5rem 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.scenario code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.security-notes {
    background: #fef3c7;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid #f59e0b;
}

.security-notes ul {
    margin: 0;
    padding-left: 1.5rem;
    color: #92400e;
    font-size: 0.9rem;
}

.security-notes li {
    margin-bottom: 0.5rem;
}

.security-notes strong {
    color: #92400e;
}

/* CA证书导入指南样式 */
.ca-import-guide {
    background: #eff6ff;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid #3b82f6;
}

.ca-import-guide > p {
    margin: 0 0 1rem 0;
    color: #1e40af;
    font-weight: 500;
}

.import-methods {
    display: grid;
    gap: 1.5rem;
}

.import-method {
    background: white;
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #dbeafe;
}

.import-method h5 {
    color: #1e40af;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.import-method ol, .import-method ul {
    margin: 0;
    padding-left: 1.5rem;
    color: #374151;
    font-size: 0.9rem;
}

.import-method li {
    margin-bottom: 0.25rem;
}

.import-method strong {
    color: #1e40af;
}

.code-block {
    margin-top: 0.5rem;
}

.code-block p {
    margin: 0.5rem 0 0.25rem 0;
    color: #374151;
    font-size: 0.85rem;
}

.code-block pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 0.75rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.25rem 0;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .documentation-section {
        margin: 1rem 0.5rem 0;
    }
    
    .doc-content {
        padding: 1rem;
    }
    
    .file-explanations,
    .usage-scenarios {
        gap: 1rem;
    }
    
    .scenario pre {
        font-size: 0.75rem;
        padding: 0.75rem;
    }
}
</style> 